<script>
    import {OrdetList} from './order'
    export default {
        data() {
            return {
                OrdetList,
                orderType: [
                    {
                        id: 0,
                        label: '商品购物',
                    }, {
                        id: 1,
                        label: '废品回收',
                    }, {
                        id: 2,
                        label: '快速上门',
                    },
                ],//订单类型列表
                currentOrderTypeID: 0,//当前选择的订单类型
                shopOrderState: [
                    {
                        id: 0,
                        label: '全部',
                    }, {
                        id: 1,
                        label: '未付款',
                    }, {
                        id: 2,
                        label: '已付款',
                    }, {
                        id: 3,
                        label: '待付款',
                    }, {
                        id: 4,
                        label: '已取消',
                    },
                ],
                currentOrderStateID: 0,//当前选择的订单的状态
            }
        },
        components: {},
        methods: {
            /**
             * @Description 选择一个订单类型
             * @author Anonymous
             * @date 2019/6/4
             */
            e_selectOrderType(t) {
                this.currentOrderTypeID = t
            },
            /**
             * @Description
             * @author Anonymous
             * @date 选择一个订单状态
             */
            e_selectOrderState(t) {
                this.currentOrderStateID = t
            }


        },
        mounted() {
        },
        created() {
        }
    }
</script>
<template>
    <div class="Order">
        <!--订单顶部-->
        <div class="ordetTop">
            <!--订单种类-->
            <div class="orderTypeArea">
            <span class="ordertypename" :class="currentOrderTypeID == v.id ? 'activeOrderType':''"
                  v-for="(v,i) in orderType" :key="i" @click="e_selectOrderType(v.id)">{{v.label}}</span>
            </div>
            <!-- 订单状态-->
            <div class="orderStateArea">
            <span class="orderstatename" :class="currentOrderStateID == v.id ? 'activeOrderState':''"
                  v-for="(v,i) in shopOrderState" :key="i" @click="e_selectOrderState(v.id)">{{v.label}}</span>
            </div>
        </div>
        <!--订单列表区域-->
        <div class="ordetListArea">
            <div class="ordetlist" v-for="(v,i) in OrdetList" :key="i">
                <!--订单列表顶部-->
                <div class="ordetListTop">
                    <div class="list_shop_info">
                        <img class="shopIcon"
                             :src="v.shopIcon" alt="">
                        <span class="shopName">{{v.shopName}}</span>
                        <img class="goIcon"
                             src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/order/fanhui%20%402x.png"
                             alt="">
                    </div>
                    <span class="orderCreateTime">{{v.createTime}}</span>
                </div>
                <!--订单商品区域-->
                <div class="orderlistgoodsArea">
                    <div class="ordetlistgoods" v-for="(item,j) in v.goodsList" :key="j">
                        <img class="goodsImg"
                             :src="item.goodsImg" alt="">
                        <div class="goodsInfoArea">
                            <div class="goodsinfotop">
                                <span class="goodsName">新鲜水果：{{item.goodsName}}</span>
                                <span class="goodsMarketPrice">￥{{item.markePrice}}</span>
                            </div>
                            <div class="goodsinfoBootom">
                                <span class="buygoodsnumber">数量：{{item.buyNumber}}</span>
                                <span class="buyMoney">实付：￥{{item.price}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="goodsListDes">
                        <span>共计{{v.goodsAccount}}种水果 合计￥{{v.totalMoney}}</span>
                    </div>
                </div>
                <!--订单按钮区域-->
                <div class="ordetBtnArea">
                    <span class="ordetTypeLabel">等待您的付款</span>
                    <div class="btnarea">
                        <span class="cancelOrder">取消订单</span>
                        <span class="cancelOrder payOrder">去支付</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
    @import "order";
</style>
